<template>
  <div class="container"> 
     <div class="mainbody">
      <div class="sidebar" :class="{ open: sidebarOpen }">
        <div v-if="!sidebarOpen" style="width: 100%;height: 100%;" @click="toggleSidebar">
           <div class="outicon">
              <el-icon><DArrowRight /></el-icon>
           </div>
        </div>
        <div v-if="sidebarOpen" class="talk_record">
             <div class="talk_record_head"   @click="toggleSidebar" >
                   <div class="line">

                   </div>
                   <div class="text">
                       <div>历史对话</div>
                   </div>
             </div>
             <div class="talk_record_content">
                <div v-for="(item,index) in talk_record" class="item" :class="{ bg: selected==index }"  @click="selectitem(index)">
                      <div class="icon1">
                        <el-icon size="20px"><ChatDotRound /></el-icon>
                      </div>
                      <div class="name">
                          <el-tooltip
                            class="box-item"
                            effect="dark"
                            :content="item.name"
                            placement="top"
                            >
                              <div>{{ item.name.length<8?item.name:item.name.substring(0,9)+"....." }}</div>
                            </el-tooltip>
                      </div>
                      <div class="icon2"  @click="editname(index)">
                        <el-icon><EditPen /></el-icon>
                      </div>
                      <div class="icon3" @click="deletename(index)">
                        <el-icon><Delete /></el-icon>
                      </div>
                </div>
            </div>
           <div class="inicon"  @click="toggleSidebar">
              <el-icon><DArrowLeft /></el-icon>
            </div>
        </div>

        <!--弹出修改名字的框-->
        <el-dialog
            v-model="dialogVisible"
            title="修改"
            width="30%"
            :before-close="handleClose"
          >
        <div style="cursor:default;caret-color:auto;">
          <el-input v-model="tempname"  />
        </div>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="changename">
                  确定
                </el-button>
              </span>
            </template>
          </el-dialog>

      </div>
         <div class="mainbody_head">
               <Head></Head>
         </div>
         <div class="mainbody_content">
             <div class="chat_box">
                <div class="local">广东 广州</div>
                <!-- 这个是聊天框 -->
                <div class="botoom">
                  <!-- 这个是文本 -->
                  <div class="chat-content" ref="chatContent">
                    <div class="chat-wrapper" v-for="(item,index) in chatList" :key="item.id">
                      <!-- 判断是用户还是自己 -->

                      <div class="chat-friend" v-if="item.uid !== '1001'">
                      <!-- 这里是对方的对话框 -->
                      <div class="UItalk">
                        <img class="imgtitle" :src="headicon" alt=""/>
                        <div class="chat-text2" v-if="item.chatType == 0">
                          {{ item.msg }}
                       <div @click="changeimg(index)" >
                        <img  class="img-good" src="../assets/icon/good.png" v-if="!item.showmsg"  alt=""/>
                        <img  class="img-good" src="../assets/icon/good2.png"  v-if="item.showmsg"  alt=""/>
                      </div>
                      </div>
                      <!-- <div v-for="(chatMsg , index) in chatList" :key="index" @click="successparse(index)"> 
                                  <transition>
                                    <div class="successparse" v-if="chatList[index].SHOW">复制成功</div>
                                  </transition>
 
                        <img class="img-parse" src="../assets/icon/parse.png" alt=""/>
                        </div>  -->
                      <div  @click="successparse(index)"> 
                            <transition>
                              <div class="successparse" v-if="item.SHOW">复制成功</div>
                            </transition>
                            <img class="img-parse" src="../assets/icon/parse.png" alt=""/>
                        </div> 
                        <div class="info-time2">
                         <span>{{ item.time }}</span>
                      </div>
                      </div>
                    
                      <!-- 这里是对方的聊天时间显示 -->
                     
                    </div>
                        <!-- 这里是我的聊天内容和显示 -->
                    <div class="chat-me"  v-else>
                          <div class="chat-text" v-if="item.chatType == 0" >
                          {{ item.msg }}
                        </div>
                        <!-- 这里是发送方的时间的显示 -->
                        <div class="info-time">
                          <span>{{ item.time }}</span>
                         
                        </div>
                      </div>

                    </div>
                  </div>
              </div>
        </div>
        <div class="mainbody_content_foot">
                    <div class="foot">
                      <div class="leftbtn">
                        <div class="leftimg">
                                <img src="../assets/icon/add.png" style="width: 100%;height: 100%;"/>
                              </div>
                      <div class="btn_lefttext">
                                  <div style="font-size: 8px;" @click="creatChat">新建对话</div>
                              </div>
                          </div>
                        <div class="btn">
                              <div class="img">
                                <img src="../assets/icon/refresh.png" style="width: 100%;height: 100%;"/>
                              </div>
                              <div class="btn_text">
                                  <div style="font-size: 8px;" @click="clearChat">清除记录</div>
                              </div>
                        </div>
                        <!-- 输入框和按钮更改 -->
                        <div class="chatInputs">
                              <input class="inputs" v-model="inputMsg" @keyup.enter="sendText" />
                        <!-- 按钮更改 -->
                        <div class="send boxinput"  @click="sendText">
                                    <img src="../assets/icon/send.png"  style="width: 100%;height: 100%; border-radius: 15px;" />   
                          </div>
                          </div>
                        <!-- 输入框和按钮更改 -->
                    </div>
                    </div>
        </div>
     </div>
    </div>
</template>

<script>
import Head from "@/components/Head.vue"
import { animation } from "@/func/func";
// import api from "../api/index"
import { useTransitionFallthroughEmits } from "element-plus";
import 'animate.css';
// import { createNamespacedHelpers } from "vuex";
// const { mapState,mapGetters ,mapMutations,mapActions}=createNamespacedHelpers('global')
export default{
  data(){
    return {
      input:"",
      sidebarOpen: false,

      responses:'',
      imgshow:true,
      Show:false,
      number:0,

      talk_record:[
          // "补发外国人永久身份证",
          // "补发外国人在中国广东省的永久居住证明",
          // "新建对话",
      ],
      selected:0,
      dialogVisible:false,
      tempname:"",
      inputText: '',
      isFocused: false,
      inputMsg: "",
      tempMsg:"",
      chatList: [],
      headicon:"https://img1.baidu.com/it/u=3488084058,342852060&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
    }
  },
  components:{
   Head
  },
    //专门来读取vuex的数据
computed:{
    // ...mapState(["history"])
  },
  created() {

    // this.$store.dispatch('commonChat/getFileList',{})
    // .then(res => {
    //     console.log("后端返回")
    //     console.log(res)
    //       this.$message({
    //         type: "success",
    //         message: "成功"  
    //       })
    // })
    // .catch(error => {
    //       console.log(error)
    //       this.$message({
    //         type: "error",
    //         message: "失败"
    //       })
    //     })




      if(localStorage.getItem("chatNum")==null) {
        localStorage.setItem("chatNum",0);
      }
      if(localStorage.getItem("totalChatNum")==null) {
        localStorage.setItem("totalChatNum",0);
      }
      if(localStorage.getItem("chatTitles")==null) {
        let va=[
          {
          name:"新建对话",
          id:0
         }
        ]
         localStorage.setItem("chatTitles",JSON.stringify(va));

         let chatTitles=[];
           chatTitles=JSON.parse(localStorage.getItem("chatTitles"));
          if(chatTitles!=null) {
            for(var i=0;i<chatTitles.length;++i) {
              let chat={
                name:chatTitles[i].name,
                id:chatTitles[i].id
              }
              this.talk_record.push(chat);
            }
          }
          this.sidebarOpen=true;
      }else {
           let chatTitles=[];
           chatTitles=JSON.parse(localStorage.getItem("chatTitles"));
          if(chatTitles!=null) {
            for(var i=0;i<chatTitles.length;++i) {
              let chat={
                name:chatTitles[i].name,
                id:chatTitles[i].id
              }
              this.talk_record.push(chat);
              console.log("chat",chat)
            }
          }
      }

      if(localStorage.getItem("currentnum")==null) {
        localStorage.setItem("currentnum",0);
        this.selected=0;
      }else {
        if(this.talk_record.length!=0){
          localStorage.setItem("currentnum",this.talk_record[this.selected].id);
        }
      }

 console.log("talk",this.talk_record);
      var currentindex=parseInt(localStorage.getItem("currentnum"));
      if(localStorage.getItem("chats"+currentindex)==null) {
          localStorage.setItem("chats"+currentindex,JSON.stringify([]))
      }else {
            let chats= JSON.parse(localStorage.getItem("chats"+currentindex));
            console.log("chats"+currentindex,chats)
            if(chats!=null) {
                for(var i=0;i<chats.length;i++) {
                  console.log("question",chats[i].question)
                  // this.chatList.push(chats[i].question);
                  // this.chatList.push(chats[i].answer);
                  let chatMsg = {
                        time:  chats[i].questionTime,
                        msg: chats[i].question,
                        chatType: 0, //信息类型，0文字，1图片
                        uid: "1001", //uid
                      };
                      this.sendMsg(chatMsg);

                let chatMsg2 = {
                        time:chats[i].answerTime,
                        msg: chats[i].answer,
                        chatType: 0, //信息类型，0文字，1图片
                        uid: "1000", //uid
                      };
                      this.sendMsg(chatMsg2);
                }    
    }
  }
  },
  methods:{
    // ...mapMutations(["undateHistory"]),
    toggleSidebar() {
      this.sidebarOpen = !this.sidebarOpen; // 切换侧边栏的打开/关闭状态
    },
    selectitem(index) {
      this.selected=index;
      if(this.talk_record[this.selected]==null) {
        return;
      }
      localStorage.setItem("currentnum",this.talk_record[this.selected].id);
      console.log("点击了",this.selected);
      var currentindex=parseInt(localStorage.getItem("currentnum"));
      let chats= JSON.parse(localStorage.getItem("chats"+currentindex));
            console.log("chats"+currentindex,chats)
            if(chats!=null) {
                  
              this.chatList=[];
                  if(chats.length==0){
                    
                    console.log(111);
                    return;
                  }
                for(var i=0;i<chats.length;i++) {
                  console.log("question",chats[i].question)
                  // this.chatList.push(chats[i].question);
                  // this.chatList.push(chats[i].answer);
                  let chatMsg = {
                        time:  chats[i].questionTime,
                        msg: chats[i].question,
                        chatType: 0, //信息类型，0文字，1图片
                        uid: "1001", //uid
                      };
                      this.sendMsg(chatMsg);

                let chatMsg2 = {
                        time:chats[i].answerTime,
                        msg: chats[i].answer,
                        chatType: 0, //信息类型，0文字，1图片
                        uid: "1000", //uid
                      };
                      this.sendMsg(chatMsg2);
                }    
    }else {
      return;
    }
    },
    editname(index) {
       this.tempname=this.talk_record[index].name;
       this.dialogVisible=true;
    },
    changename() {
      this.talk_record[this.selected].name=this.tempname;
      localStorage.setItem("chatTitles",JSON.stringify(this.talk_record));
      this.dialogVisible=false;
    },
    deletename(index) {
      this.talk_record.splice(index, 1);  
      var currentindex=parseInt(localStorage.getItem("currentnum"));
      localStorage.setItem("chatTitles",JSON.stringify(this.talk_record));
      localStorage.removeItem("chats"+currentindex);
      localStorage.removeItem("history"+currentindex);
      var num=parseInt(localStorage.getItem("chatNum"));
      num--;
      localStorage.setItem("chatNum",num);
    },

creatChat() {
  this.$store.dispatch('commonChat/creatConversation',{})
    .then(res => {
        console.log("后端返回")
        console.log(res)
          this.$message({
            type: "success",
            message: "成功"  
          })
    })
    .catch(error => {
          console.log(error)
          this.$message({
            type: "error",
            message: "失败"
          })
        })
      let num=0,num2=0;
      num=parseInt(localStorage.getItem("chatNum"));
      num++;
      num2=parseInt(localStorage.getItem("totalChatNum"));
      num2++;
      let chat={
        name:"新建对话",
        id:num2
      }
      localStorage.setItem("chatNum",num);
      localStorage.setItem("totalChatNum",num2);
      let chatTitles=[];
      chatTitles=JSON.parse(localStorage.getItem("chatTitles"));
      chatTitles.push(chat);
      localStorage.setItem("chatTitles",JSON.stringify(chatTitles));
      this.talk_record.push(chat);
      this.sidebarOpen =true;
      this.selected=num;
      localStorage.setItem("currentnum",num2);
      if(localStorage.getItem("chats"+num2)==null) {
          localStorage.setItem("chats"+num2,JSON.stringify([]))
          this.chatList=[];
      }
    },


    //清除聊天记录
    clearChat() {
      var currentindex=parseInt(localStorage.getItem("currentnum"));
      localStorage.setItem("history"+currentindex,JSON.stringify([]));
      localStorage.setItem("chats"+currentindex,JSON.stringify([]));
      location.reload();
    },

        // 发送信息的函数
  sendMsg(msgList) {
      this.chatList.push(msgList);
      this.scrollBottom();
    },
    //获取窗口高度并滚动至最底层
  scrollBottom() {
      this.$nextTick(() => {
        const scrollDom = this.$refs.chatContent;
        animation(scrollDom, scrollDom.scrollHeight - scrollDom.offsetHeight);
      });
    },

  successparse(index){
  
  const text = this.chatList[index].msg;
  this.chatList[index].SHOW=true;
  navigator.clipboard.writeText(text)
    .then(() => {
    })
    .catch((error) => {
      console.error('复制失败：', error);
    });
    setTimeout(() =>{
      this.chatList[index].SHOW=false;
      },2000);
    },


changeimg(index){
  this.chatList[index].showmsg=true;

    // setTimeout(() =>{
    //   this.chatList[index].showmsg=false;
    //   },2000);

   },

     
    //发送文字信息
async sendText() {
  let newDate = new Date(); 
  let sendtime=newDate.getHours()+":"+(newDate.getMinutes().toString().length==1?"0"+newDate.getMinutes():newDate.getMinutes());
  console.log("发送时间",sendtime,"长度",newDate.getMinutes().toString().length);
  var currentindex=parseInt(localStorage.getItem("currentnum"));
      if (this.inputMsg) {
        let chatMsg = {
          time: sendtime,
          msg: this.inputMsg,
          chatType: 0, //信息类型，0文字，1图片
          uid: "1001", //uid
        };
        this.sendMsg(chatMsg);
        this.tempMsg=this.inputMsg;
        if(JSON.parse(localStorage.getItem("chats"+currentindex)).length==0) {
          for(var i=0;i<this.talk_record.length;++i){
              if(this.talk_record[i].id==currentindex) {
                    this.selected=i;
                    this.talk_record[this.selected].name=this.inputMsg;
                    localStorage.setItem("chatTitles",JSON.stringify(this.talk_record));
                    break;
              }
          }
        }
        this.inputMsg = "";
      } else {
         alert('内容不可为空哦')
      }


        // let chatMsg = {
        //   time: "09：12 AM",
        //   msg: "信息类型，0文字，1图片信息类型，0文字，1图片信息类型，0文字，1图片信息类型，0文字，1图片信息类型，0文字，1图片信息类型，0文字，1图片",
        //   chatType: 0, //信息类型，0文字，1图片
        //   uid: "1000", //uid
        // };
        // this.sendMsg(chatMsg);

        var history=[];
      if(localStorage.getItem("history"+currentindex)==null) {
        localStorage.setItem("history"+currentindex,JSON.stringify([]));
      }else {
         var temp=[];
         temp=JSON.parse(localStorage.getItem("history"+currentindex));
         history=temp;
         console.log("历史记录",temp);
      }


    //  发送请求
        const params = {
          question: this.tempMsg,
          history:history
    };
    
    this.$store.dispatch('commonChat/chat',params)
    .then(res => {
        console.log("后端返回")
        console.log(res)
        let newDate2 = new Date(); 
        let receivetime=newDate2.getHours()+":"+(newDate2.getMinutes().toString().length==1?"0"+newDate2.getMinutes():newDate2.getMinutes());
        console.log("发送时间",receivetime);
        this.number=this.number+1;
        history=res.data.history;
        console.log("history",history);
        localStorage.setItem("history"+currentindex,JSON.stringify(history));
        console.log("again",JSON.parse(localStorage.getItem("history"+currentindex)));
        let chat={
          question:res.data.question,
          answer:res.data.response,
          questionTime:sendtime,
          answerTime:receivetime
        }
        let chats=[];
        chats=JSON.parse(localStorage.getItem("chats"+currentindex));
        console.log("之前",chats);
        chats.push(chat);
        localStorage.setItem("chats"+currentindex,JSON.stringify(chats))
        console.log("之后",JSON.parse(localStorage.getItem("chats"+currentindex)));
        
        let chatMsg = {
          time: receivetime,
          msg: res.data.response,
          chatType: 0, //信息类型，0文字，1图片
          uid: "1000", //uid
          SHOW:false,
          showmsg:false,
          Number:this.number,//相当于一直给聊天数量计数来区别不同的聊天框
        };
        this.sendMsg(chatMsg);

          this.$message({
            type: "success",
            message: "成功"  
          })
        })
        .catch(error => {
          console.log(error)
          this.$message({
            type: "error",
            message: "失败"
          })
        })
      }
  }
}
</script>

<style lang="scss" scoped>
.container {
  width: 100vw;     /* 占满浏览器宽度 */
  height: 100vh;    /* 占满浏览器高度 */
  display: flex;
  background-color: grey;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  cursor:default;
  caret-color: transparent;
}

.sidebar {
  position: absolute; /* 设置侧边栏为绝对定位，使其脱离文档流 */
  left: 0;
  height:90vh; /* 设置侧边栏的高度为对话框高度*/
  width: 40px; /* 设置侧边栏的默认宽度 */
  background-color:rgba(49, 67, 130, 0.8);
   /* 设置侧边栏的默认背景色，浅蓝色透明 */
  opacity: 0.8;/* 设置侧边栏的默认背景色，浅蓝色透明 */
  border-top-right-radius: 13px;
  border-bottom-right-radius: 13px;
  z-index: 999; /* 将侧边栏的层级设置为最高，使其覆盖在内容之上 */
  transition: all 0.1s ease; /* 添加动画过渡效果 */
  pointer-events: auto; /* 禁用侧边栏的鼠标交互事件，使其下面的内容可以 点击 */
}

.sidebar.open {
  width: 250px; /* 设置侧边栏打开时的宽度 */
  background-color:#dae7f8 ; ; /* 设置侧边栏的默认背景色，浅蓝色透明 */
  opacity: 1;/* 设置侧边栏的默认背景色，浅蓝色透明 */
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  pointer-events: auto; /* 启用侧边栏的鼠标交互事件 */
  
}

.talk_record {
  height:90vh;
  width: 250px;
  display: flex;
  flex-direction: column;
  justify-content: baseline ;
  align-items: center;
  caret-color: black;
}
.talk_record .talk_record_head {
  height:6vh;
  width: 250px;
  border-top-right-radius: 15px;
  background-color: #c6d8f0;
  display: flex;
  flex-direction: column;
  justify-content: center ;
  align-items: center;
  caret-color: black;
}
.talk_record_head .line {
  width: 80px;
  height: 3px;
  background-color: #000000;
  
}
.talk_record_head .text {
  width: 85px;
  height: 4vh;
  color: #000000;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
}
.talk_record .talk_record_content {
  height:80vh;
  width: 250px;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
  justify-content: baseline ;
  align-items: center;
   
}

.talk_record_content .item {
  height:40px;
  width: 250px;
  display: flex;
  flex-direction: row;
  justify-content: center ;
  align-items: center;
}

.bg {
  background-color: #9ec0ed;
}
.item .icon1 {
  height:40px;
  width: 40px;
  display: flex;
  flex-direction: row;
  justify-content: center ;
  align-items: center;
  
}

.item .icon2 {
  height:30px;
  width: 30px;
  display: flex;
  flex-direction: row;
  justify-content: center ;
  align-items: center;
}

.item .icon3 {
  height:30px;
  width: 30px;
  display: flex;
  flex-direction: row;
  justify-content: center ;
  align-items: center;
}

.item .name {
  height:40px;
  width: 150px;
  font-size: 14px;
  color: black;
  display: flex;
  flex-direction: row;
  justify-content: baseline ;
  align-items: center;
  
}

/**
不显示滚动条
 */
::-webkit-scrollbar {
        width: 0px;
    }


.container .mainbody{
  min-width:75vw;
  width: auto !important;
  height:92vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  
}

.mainbody .mainbody_head {
  min-width: 75vw;
  width: auto !important;
  height: 6vh;
  background-color:  #FFFFFF; 
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.mainbody_head .left_part {
    min-width: 25vw;
    width: auto !important;
    height: 6vh;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.left_part .logo {
  min-width: 10vw;
  width: auto !important;
  height: 6vh;
  display: flex;
  text-align: center;
  flex-direction: row;
  justify-content:center;
  align-items: center;
  background-color: aqua;
}

.left_part .tap {
  min-width: 12vw;
  width: auto !important;
  height: 6vh;
  display: flex;
  text-align: center;
  flex-direction: row;
  justify-content:space-between;
  align-items: center;
}

.tap .tap1 {
  min-width: 3vw;
  width: auto !important;
  height: 6vh;
  display: flex;
  text-align: center;
  flex-direction: column;
  justify-content:center;
  align-items: center;
}
.tap .tap2 {
  min-width: 6vw;
  width: auto !important;
  height: 6vh;
  display: flex;
  text-align: center;
  flex-direction: column;
  justify-content:center;
  align-items: center;
}
.mainbody_head .right_part {
    min-width: 20vw;
    width: auto !important;
    height: 6vh;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}

.right_part .witcher {
  min-width: 9vw;
  width: auto !important;
  height: 6vh;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

.right_part .headicon {
  min-width: 9vw;
  width: auto !important;
  height: 6vh;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}
.mainbody .mainbody_content {
  min-width: 75vw;
  width: auto !important;
  height: 84vh;
  background-color: #E7F1FB;
  display: flex;
  flex-direction: column;
  justify-content: baseline;
  align-items: center;
}

.botoom {
  flex-direction: column;
  min-width: 65vw;
  width: auto !important;
  height: 67vh;
  margin-top:4.5vh;
  display: flex;
   
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(152.12deg, rgba(150, 180, 226, 0.3) 0%, rgba(229, 239, 253, 0.3) 100%);
  box-shadow: 2px 4px 4px rgba(150, 180, 226, 0.17);
  border-radius: 20px;
}
.botoom .chat-content {
      width: 100%;
      height: 90%;//这里有问题，100%会导致滑块无法正常工作
      overflow-y: auto;
      padding: 25px;
      padding-top:0px;
      box-sizing: border-box;
      &::-webkit-scrollbar {
        width: 0; /* Safari,Chrome 隐藏滚动条 */
        height: 0; /* Safari,Chrome 隐藏滚动条 */
        display: none; /* 移动端、pad 上Safari，Chrome，隐藏滚动条 */
      }
}
.chat-wrapper {
        position: relative;
        word-break: break-all;
}
 
.img-good{
  width: 14px;
  height: 14px;
  float: left;
  margin-bottom: 0;
  margin-top: 5px;
  margin-left: -8px;
}
.successparse{
  float: right;
  max-width: 70px;
  margin-top: -35px;
  margin-right:30px;
  font-size: 5px;
  height: auto !important;
  padding: 4px;
  padding-bottom: 1px;
  padding-top: 1px;
  border-radius: 5px;
  background-color:  rgb(16, 86, 226);
  color: #fdfbfb;
  animation-name:fadeOut;
}


.v-enter-active {
      animation: bounce-in 0.5s
}
 
.v-leave-active {
      animation: bounce-in 0.5s reverse
}
@keyframes bounce-in {
      0% {
        opacity: 0;
      }
 
      100% {
         opacity: 1;
      }
}
 .local{
  margin-top: 5px;
  width: 100%; 
  z-index:99;
  position: relative;
  float: right;
  margin-right: 50px;
  text-align: right;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-size: 13px;
  line-height: 19px; 
  color: #000000; 
 }

.img-parse{
  width: 28 px;
  height: 28px;
  margin-top: -39px;
  margin-right:5px;
  float: right;
  display: inline;
}
.chat-me { 
      width: 100%;
      float: right;
      margin-bottom: 20px;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: flex-end;
          
}
.chat-friend{
      width: 100%;
      float: left;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      
}
.chat-text {
      box-sizing: border-box;
      display:inline;
      float: right;
      max-width: 300px;
      height: auto !important;
      padding: 15px;
      padding-bottom: 15px;
      padding-top: 15px;
      font-size: 15px;
      border-radius: 10px 10px 5px 10px;
      background-color: rgb(248, 248, 249);
      font-family: 'Inter';
      font-style: normal;
      font-weight: 400; 
      line-height: 18px;
      text-align:left;
      color: #000000;
      &:hover {
        background-color: rgb(224, 226, 231);
        } 
}
 
.chat-text2 {
      float:left;
      vertical-align: middle;
      max-width: 300px;
      height: auto !important;
      padding: 20px;
      padding-bottom: 8px;
      color: #fff;
      margin-bottom: 10px;
      background: linear-gradient(102.57deg, #90B6EF 4.48%, rgba(185, 209, 246, 0.664583) 43.97%, rgba(217, 230, 247, 0.7) 90.74%),linear-gradient(#90B6EF,#90B6EF);
      border-radius: 5px;
      font-family: 'Inter';
      font-style: normal;
      font-weight: 400; 
      line-height: 18px;
      text-align:left;
      &:hover {
       background: linear-gradient(102.57deg, #8eb6f1 4.48%, rgba(181, 207, 246, 0.665) 43.97%, rgba(211, 227, 248, 0.7) 90.74%),linear-gradient(#90B6EF,#90B6EF);
        } 
}

.info-time {
      margin: 10px 0;
      color: #020202;
      font-size: 14px;
      display: flex;
      justify-content: flex-end;
      span {
        line-height: 30px;
      }
      span:first-child {
        margin-right: 5px;
        vertical-align: middle;
      }
}
.info-time2 {
      display: flex;
      width: 130px;
      color: #020202;;
      font-size: 14px;
      margin-left:50px; 
}
.imgtitle{
      float: left;
      width: 40px;
      height:40px;
      border-radius: 50%;
      vertical-align: middle;
      margin-right: 10px;
      bottom: 0px;
}

.mainbody_content .mainbody_content_foot {
  min-width: 70vw;
  width: auto !important;
  height: 12vh;
  margin-top: 1vh;
  background-color: #E7F1FB;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.mainbody_content_foot .foot {
  min-width: 45vw;
  width: auto !important;
  height: 6vh;
  background-color: #E7F1FB;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding-top: 6px;
}

.foot .btn {
  min-width: 100px;
  width: auto !important;
  height: 30px;
  border-radius: 30px;
  background-color: #90A5EF;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}



.btn .img {
  min-width: 1vw;
  width: auto !important;
  height: 4vh;
  margin-right: 5px;
}
.btn .btn_text {
  min-width: 2vw;
  width: auto !important;
  height: 4vh;
  text-align: left;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.leftbtn {
  margin: 0 20px;
  min-width: 100px;
  width: auto !important;
  height: 30px;
  border-radius: 30px;
  background-color: #90A5EF;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-left: -30px;
}

.leftimg{
  min-width: 1vw;
  width: auto !important;
  height: 3vh;
  margin-right: 5px;
}

.btn_lefttext {
  min-width: 2vw;
  width: auto !important;
  height: 4vh;
  text-align: left;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

}
/* 用来规范按钮和文本框的格式 */
.chatInputs{
  min-width: 30vw;
  width: auto !important;
  height: 5vh;
  margin-left:2vw;
  border-radius: 10px;
  display: flex;
  flex-direction: row;
  justify-content: baseline;
  align-items: center;

}
/* 输入文本框的格式 */
.inputs {
  width: auto !important;
  caret-color: black; 
   min-width: 33vw;
  height: 5vh;  
  background-color: rgb(254, 255, 255);
  border-top-left-radius:15px;
  border-bottom-left-radius:15px;
  border: 0;
  padding: 10px;
  box-sizing: border-box;
  transition: 0.2s;
  font-size: 16px;
  color: #030000;
  font-weight: 100;
  margin: 0 -10px;
  outline: none;
}
// 这个是点击按钮的格式
.boxinput {
  min-width: 2vw;
  height: 5vh;
  width: auto !important;
  border: 0;
  background-color: rgb(217, 220, 230);
  border-radius: 15px;
  position: relative;
  cursor: pointer;
}

.outicon{ 
  position: absolute;
  bottom: 10px;
  left:10px;
}

  .el-icon{
  position: relative;
  font-size: 20px;
  font-weight: 50px;
  border-radius: 10px;
  color:  black;
  
}
</style>